<script setup>
import BarIcon from '../icon/BarIcon.vue'
</script>

<template>
    <div style="background-color: #f9f9f9; height: 100%">
        <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="true" @open="handleOpen"
            @select="handleSelect" @close="handleClose">
            <template v-for="(item, idx) in menuItem" :key="idx">
                <el-sub-menu v-bind:class="{ 'action': item.action }" :index="idx + ''" style="padding-top: 10px;padding-bottom: 10px"
                    @click="handlerClick(item)">
                    <template #title>
                        <bar-icon :icon="item.icon" :width="25" :height="25" :color="item.color" />
                        <!-- <span>{{ item.title }}}</span> -->
                    </template>
                    <template v-for="(itm, idex) in item.item" :key="idx+'-'+idex">
                        <el-menu-item :index="idx + '-' + idex">{{ itm.name }}</el-menu-item>
                    </template>
                    <!-- <el-sub-menu index="1-4">
                        <template #title><span>item four</span></template>
                        <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-sub-menu> -->
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script>
import menuMap from '../../../assets/data/menu.js'
export default {
    emits: ['calledSelected'],
    components: { BarIcon },
    data() {
        return {
            menuItem: menuMap.data
        }
    },
    methods: {
        isCollapse() {

        },
        handleOpen() {

        },
        handleClose() {

        },
        handleSelect(index, path) {
            this.menuItem.forEach((item) => {
                item.color = '#606266';
            })
            var idx = index.split('-')[0];
            var pane = index.split('-')[1];
            this.menuItem[idx].color = '#3475fe';
            this.$emit('calledSelected', this.menuItem[idx].path, this.menuItem[idx].item[pane]);
        },
        handlerClick(item) {
            this.menuItem.forEach((itm) => {
                itm.action = false;
            })
            item.action = true;
        }
    },
    mounted() {
        this.menuItem[0].action = true;
    }
}

</script>

<style scoped>
.action::after {
    content: "";
    position: absolute;
    width: 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: translateY(-65px);
    height: 72px;
    background-color: #3475fe;
}

.action {
    background-color: #f0f5ff;
}
</style>